<%@ page contentType="text/css; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<jsp:useBean id="dossierImages" scope="session" class="java.lang.String" />

/* CSS Document */


/* Classes */

.clear {
	clear : both;
	height : 0;
	width : 0;
}

.bouton {
	background : #ee7f00;
	border : 0;
	color : #ffffff;
	font-weight : bold;
	padding : 2px 8px;
	cursor : pointer;
}

p{
	line-height: 160%;
	margin-bottom: 5px;
	padding: 0px;
	text-align: center;
}

/* Admin accueil */

.divAdminAcueil{
	width:600px;
	background:#EE7F00;
	margin:30px auto 0;
	padding:5px 10px;
	text-align:center;
	font-weight:bold;
}

.sousDivAdminAccueil{
	margin:auto;
	padding:4px 10px;
	text-align:center;
	width:598px;
	border-left:1px solid #EE7F00;
	border-right:1px solid #EE7F00;
	border-bottom:1px solid #EE7F00;
}

.sousDivAdminAccueil a{
	display:block;
}

/* Admin commande */

.tableAdminCommande{
	color:black;
}

.tableAdminCommande thead td{
	padding:2px 10px;
	color:black;
	font-weight:bold;
}

.tableAdminCommande tbody td{
	padding:4px 10px;
	color:black;
}

/* Admin Fournisseur */

.listFournisseur{
	width:700px;
	margin:0 auto 20px;
}

.listFournisseur thead{
	font-weight:bold;
	background:#ee7f00;
}

.listFournisseur thead td{
	padding:2px 10px;
	font-weight:bold;
}

.listFournisseur tbody td{
	padding:4px 10px;
	vertical-align:top;
}


/* Admin categorie */

.listCategories{
	width:600px;
	margin:0 auto 20px;
}

.listCategories thead{
	font-weight:bold;
	background:#ee7f00;
}

.listCategories thead td{
	padding:2px 10px;
}

.listCategories tbody td{
	padding:4px 10px;
	vertical-align:top;
}

/* Admin compte */

.paginationAdminL{
 	float:left;
}

.paginationAdminR{
 	float:right;
}

.lienPagination{
	width:800px;
	margin:5px auto 20px;
}

.tableNewCompteAdmin{
	margin:10px auto 20px;
	width:400px;
}

.tableNewCompteAdmin td{
	padding:2px 10px; 
	text-align:left;
	vertical-align:top;
} 

.newCompte{
	float:right;
	margin:10px 30px 10px 0;
}

.formDroits{
	width:180px;
	text-align:left;
	margin:0 auto 30px;
}

.formDroits input{
	margin:0 10px 0 0;
}

.divDroitsAdmin{
	width:500px;
	margin:0 auto 20px;
	text-align:center;
}

.divRechercheCompte{
	margin:30px auto;
	text-align:center;
}

.divRechercheCompte input{
	margin:0 30px 0 10px;
}

.noResultRecherche{
	margin:30px auto;
	text-align:center;
	color:#E20031;
	font-weight:bold;
	width:500px;
}

.tableAdminComptes{
	width:800px;
	margin:auto;
}

.tableAdminComptes thead{
	font-weight:bold;
	background:#ee7f00;
}

.tableAdminComptes thead td{
	padding:2px 10px;
}

.tableAdminComptes tbody td{
	padding:4px 10px;
	vertical-align:top;
}

.tableAdminStock{
	width:600px;
	margin:auto;
}

.tableAdminStock thead{
	font-weight:bold;
	background:#ee7f00;
}

.tableAdminStock thead td{
	color:black;
	padding:2px 10px;
}

.tableAdminStock thead th h3{
	color:black;
}

.tableAdminStock tbody td{
	padding:4px 10px;
	vertical-align:top;
}

.tableAdminStockMaj{
	width:600px;
	margin:auto;
}

.tableAdminStockMaj thead{
	font-weight:bold;
	background:#ee7f00;
}

.tableAdminStockMaj thead td{
	color:black;
	padding:2px 10px;
}

.tableAdminStockMaj thead th h3{
	color:black;
}

.tableAdminStockMaj tbody td{
	padding:4px 10px;
	vertical-align:top;
}

.bloque{
	color:red;
}

.pasBloque{
	color:green;
}

.divCompteCLientL{
	float:left;
	width:250px;
	padding:10px 20px;
}

.divCompteCLientR{
	float:right;
	width:250px;
	text-align:right;
	padding:10px 20px;
}

.infosClient{
	width:580px;
	margin:0 auto 20px;
	padding:0 0 20px 0;
}

.infosAdmin{
	width:580px;
	margin:0 auto 0px;
	padding:0 0 20px 0;
}

.commandesClient{
	width:650px;
	margin:auto;
}

.commandesClient thead{
	font-weight:bold;
	background:#ee7f00;
}

.commandesClient thead td{
	padding:2px 10px;
}

.commandesClient tbody td{
	padding:4px 10px;
	vertical-align:top;
}

.confirmNewPassMail{
	padding:10px 20px;
	margin:auto;
	width:580px;
	text-align:center;
}

/* Compte */

.titleInfo{
	border-bottom:1px solid #EE7F00;
	font-weight:bold;
	height:15px;
	margin:0 auto;
	width:600px;
	color:black;
}

.infoCompte{
	color:#999999;
	height:15px;
	margin:0 auto 30px;
	width:600px;
}

.infoClientLeft{
	float:left;
	margin:0;
	padding:0;
	text-align:left;
}

.infoClientRight{
	float:right;
	margin:0;
	padding:0;
	text-align:right;
}

#infosGenerales{
	display:none;
	height:0;
	margin:0 auto;
	visibility:hidden;
	width:600px;
}

#motsDePasse{
	display:none;
	height:0;
	margin:0 auto;
	visibility:hidden;
	width:600px;
}

#desactivation{
	display:none;
	height:0;
	margin:0 auto;
	visibility:hidden;
	width:600px;
}




/* Panier */

#etatCommande {
	text-align : center;
}
#etatCommande ul {
	padding : 0;
}
#etatCommande ul li {
	display : inline;
	padding : 5px 20px;
	font-weight : bold;
	margin : 0 50px;
}
.commandeFait {
	background : #ee7f00;
}
.commandePasFait {
	background : #ffffff;
	color : #ee7f00;
	border : 1px solid #ee7f00;
}
.tablePanier {
	width : 750px;
	margin : 40px auto 0; 
}
.tablePanier thead td {
	font-weight : bold;
	padding : 0 5px 10px;
}
.tablePanier tbody input {
	width : 40px;
	text-align : center;
}
.tablePanier tbody img {
	cursor : pointer;
}
.tablePanier tbody td {
	padding : 1px 5px;
}
.lignePair {
	background : #ffff99;
}
.boutonCalculPanier {
	margin : 20px 20px 0 0;
	float:right;
}

/* Accueil */

#accueilL{
	float:left;
	width:420px;
}

#accueilR{
	float:right;
	width:420px;
}

/* Galerie */
.lienDesc {
	color:black;
	font-weight:normal;
}
.lienDesc:hover {
	color:black;
}
.ligneProduits {
	margin:0;
}

.ligneProduits td{
	padding:10px 23px 25px;
	vertical-align:top;
	text-align:center;
}

.ligneProduits .produit {
	text-align : center;
	width : 220px;
	border : 1px solid #acacac;
	cursor : pointer;
}
.left {
	float : left;
}
.right {
	float : right;
}
.middle {
	margin : auto;
}

.titreProd{
	text-align:center;
	font-weight:bold;
	font-size:10pt;
	margin:10px 0 0;
	padding:0 5px;
}

.invalideProd {
	color: red !important;
}

.prixProd {
	text-align : center;
	font-weight : bold;	
	color : #e20031;
	font-size : 11pt;
	float:right;
	border-bottom:1px solid #acacac;
	border-left:1px solid #acacac;
	padding:10px 10px;
	margin:0 0 20px 0;
}

.produitDesc {
	margin:0px 0 10px;
	padding:10px;
	text-align : left;
	height:40px;
}

/* Detail produit */
.photoProduit {
	float : left;
}
.photoEnCours {
	border :1px solid #acacac;
	padding:10px 20px;
	width:178px;
	height:180px;
	text-align:center;
	vertical-align:middle;
}
.autresPhotos img {
	width : 47px;
	margin : 5px 4px 0;
	border : 1px solid #acacac;
	cursor:pointer;
}
.detailProduit {
	width : 450px;
	float : right;
}
.produitConteneur {
	margin : 10px 30px;
}
.proprieteProduit {
	margin : 25px 0;
	float : left;
}
.tableProduit {
	margin : 0 0 15px 0;
}
.tableProduit td {
	padding : 1px 50px 1px 0;
}
.tableProduit select {
	width : 80px;
}
.tableProduit input {
	width : 30px;
	text-align : center;
}
.prixProduit {
	text-align : center;
	float : right;
	padding : 0 10px;
	margin : 25px 0;
}

.imageProd{
	text-align:center;
	height:185px;
	margin:30px 0 0 0;
	padding:5px;
}

.lienPaginationProduit{
	width:760px;
	margin:0px auto 20px;
}

/* General */

h2 {
color : #ee7f00;
font-weight : bold;
font-size : 23pt;
margin : 5px 0 20px 0;
padding : 0;
}
h1 {
color : #ee7f00;
font-weight : bold;
font-size : 11pt;
margin : 0 0 10px 0;
text-align : left;
}
h3 {
color : #e20031;
font-weight : bold;
font-size : 11pt;
margin : 0px 0 15px 0;
text-align : center;
padding : 2px 0;
}

/* Template */

body{
	width:900px;
	position:absolute;
	left:50%;
	margin:0 auto;
	margin-left:-450px;
	font-family:Arial;
	font-size:12px;
}

a{
	text-decoration:none;
	color:#EE7F00;
	font-weight:bold;
	font-size:12px;
	cursor:pointer;
}

a:hover{
	color:#FABB00;
}

img{
	border:0;
}

#headerLeft{
	float:left;
}

#headerCenter{
	float:left;
	text-indent: 50px;
	margin-top: 40px;
	margin-left: 80px;
}

#headerRight{
	float:right;
	//padding:15px;
	text-align:right;
}

#headerRight ul{
	list-style-type:none;
	padding:0;
	margin:20px 0 0 0;
}

#headerRight ul li{
  float:right;
	margin:0 0 0 20px;
	padding:0;
}

#menu{
	background:#EE7F00;
	list-style-type:none;
	padding:0;
	margin:0;
	width:900px;
	height:29px;
	display:block;
}

#menu li{
	float:left;
	padding:0;
	text-align:center;
	background:#EE7F00;
	margin:0;
	font-weight:bold;
	height:29px;
}

#menu li a{
	display:block;
	color:#FFFFFF;
	padding:7px 40px;
}


#menu li:hover{
	background:#FABB00;
}


#menu .sousMenu{
	position:relative;
	display: none;
	background-color: #729A28;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}

#menu .sousMenu li{
	color: #FFFFFF;
	float: none;
	margin: 0;
	padding: 0 !important;
	border: 0;
	text-align:left;
}

#menu .sousMenu li a:link, #menu .sousMenu li a:visited{
	color: #FFFFFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent ;
	padding: 8px 10px !important;
}

#menu .sousMenu li a:hover{
	background-image: none;
}

#menu li:hover > .sousMenu { 
	display: block;
}



#content{
	border:1px solid #EE7F00;
	border-top:0;
	margin:0;
}

#contenu{
	margin:0;
	padding:20px;
}

#navigation{
	padding:10px 10px 0;
}

#footer{
	margin:0;
	padding:10px 0;
	text-align:center;
	color:#EE7F00;
}

#footer a{
	margin:0 20px;
	font-weight:bold;
	font-size:10px;
}

/*Connexion/Inscription*/

#dejaClient{
   width:335px;
   margin-left: auto ;
   margin-right: auto ;
   border : 1px solid #acacac;
   padding:5px 0;
   margin-top: 10px;
}


#titreDejaClient{
	text-align: center;
	padding-bottom:4px;
	padding-top:0px;
	border-bottom:1px solid #DDDDDD;
	margin-top:0;
}

#titreNouveauClient{
	text-align: center;
	padding-bottom:0px;
	padding-top:4px;
	border-top:1px solid #DDDDDD;
}

.image {
	vertical-align:top; 
	margin-right:5px;
}

ul, ol {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	align:center;
}

#boutonEnvoyer{
	width:250px;
	margin-left: auto;
    margin-right: auto;
    padding-bottom:0px;
    padding-top:0px;
}

#boutonCreerCompte{
	width:250px;
   	margin-left: auto;
   	margin-right: auto;
}

#centerBouton{
	text-align:center;
}

#champObligatoire{
	color:red;
	font-style:italic;
}

#fieldsetRecupMDP{
	margin:auto;
	padding:10px;
	width:715px;
}


#fieldsetErreurGeneral{
	margin:auto;
	padding:10px;
}

#fieldsetRecupMDPOK{
	margin:auto;
	padding:10px;
}

#fieldsetConnexionIdentification{
	width:500px;
	margin:0 auto;
	padding:10px;
}

#fieldsetConnexionperso{
	width:500px;
	margin:auto;
	padding:10px;
}

#fieldsetValidationFormulaire{
	width:500px;
	margin:auto;
	padding:10px;
}

#fieldsetPaiement {
	width:400px;
	margin:auto;
	padding:10px;
}


/*/*
 *Form CSS
 */
.form-all {
	
	
}

.form-captcha {
    border: 1px solid #ccc;
    background: #f5f5f5;
    padding: 6px;
    width: 152px;
}

.form-captcha:hover {
    border: 1px solid #aaa;
}

.form-captcha-image {
    border: 1px solid #aaa;
}

.form-collapse-table{
     height:58px;
     border:1px solid #ccc;
     position:relative;
}
.form-collapse-left{
}

.form-collapse-mid{
     text-shadow:0px 2px 0px #fff;
     float:left;
     font-size:18px;
     margin:16px 45px 16px 20px;
}

.form-product-item{
    display:inline-block;
    padding:5px 5px 5px 10px;
    position:relative;
}

.form-product-item:hover{
    background:#f5f5f5;
    color:#000;
}

.form-product-image, .form-product-image-with-options{
    margin:5px;
    margin-left:10px;
}

.form-product-image-with-options{
    position:absolute;
    top:15px;
}

.form-radio, .form-checkbox{
    vertical-align:middle;
    margin:0px;
    padding:0px;
}

.form-radio-item, .form-checkbox-item{
    margin-top:5px;
    float:left;
}
.form-multiple-column, .form-single-column{
    display:inline-block;
}
.form-multiple-column .form-radio-item, .form-multiple-column .form-checkbox-item{
    width:150px;
}

.form-radio-item label, .form-checkbox-item label{
    margin-left:5px;
}
.form-radio-item br, .form-checkbox-item br{
    clear:left;
}

.form-submit-button, .form-submit-reset, .form-submit-print{
    margin:0px;    
    overflow:visible;
    padding:1px 6px;
    width:auto;
}
.form-submit-button::-moz-focus-inner, .form-submit-reset::-moz-focus-inner{
    border: 0px;
    padding:1px 6px;
}

.form-collapse-right{
     position:absolute;
     right:0px;
     height:58px;
     width:40px;
}

.form-collapse-right-show{
     background: url(/<% out.print(dossierImages); %>arrow-open.png) no-repeat center;
}
.form-collapse-right-hide{
     background: url(/<% out.print(dossierImages); %>arrow-closed.png) no-repeat center;
}

.form-collapse-hidden {
    display: none;
}

.form-grading-item {
    margin-bottom: 3px;
}

.form-header {
    margin:0px;
}

.form-subHeader {
    border-top: 1px solid #ccc;
    font-style: italic;
}

.form-header-group{
    background:#f5f5f5;
    border-bottom:1px solid #ccc;
    padding:12px;
	clear:both;
}

.form-label {
    width: 150px;
    margin-bottom: 6px;
    display:inline-block;
}

.form-label-top {
    margin-bottom:6px;
    display:inline-block;
}

.form-label-left {
    float:left;
    display:inline-block;
    text-align:left;
    padding:3px;
}

.form-label-right {
    float:left;
    display:inline-block;
    text-align:right;
    margin-right:6px;
    margin-bottom:6px;
    padding:3px;
}

.form-input-wide {
}

.form-section, .form-section-closed {
    margin:0px;
    padding:0px;
    position:relative;
}

.form-input {
   display:inline-block;
}

.form-line {    
	clear:both;
	padding:10px;
	margin:0px;
    display:inline-block;
    width:97%;
    /* Removed this because it was changing the size of the migrated forms */
	/* border:1px solid transparent ; */
	position:relative;
}

.form-line-column{
    float:left;
    clear:none;
    width:auto;
}

.form-line-column-clear{
    clear:left;
    width:auto;
}

.form-line-active {
    background-color: #FABB00;
    color:#333;
}

.form-required {
    margin-left: 5px;
    color: red;
}

.form-address-table td, .form-address-table th{    
    padding-bottom:10px;
}

.form-button-error{
    color:red;
    display:inline;
}

.form-line-error{
    background:#FFAAAA;
    color:#333;
}

.form-validation-error{
    border:2px solid red;
}

.form-line-active .form-error-message {
    display: none; 
}


.form-sub-label-container{
    display:inline-block;
    margin-right:5px;
}
.form-sub-label{
    color:#999999;
    display:block;
    font-size:9px;
    
}
.form-html{
    padding:3px;
}
.form-radio-other-input{
    margin-left:5px;
}

/*
 * TODO: This a fix for column view in IE6 and IE7
 * only in single column. After relaxing we have
 * to change the HTML code directly to fix column
 * problems in IE6 and IE7.
 */
.form-single-column .clearfix { display: inline-block; }
.form-single-column .clearfix { display: block; }

.form-label{
    width:110px !important;
}
.form-label-left{
    width:110px !important;
}
.form-line{
    padding:10px;
}
.form-label-right{
    width:110px !important;
}
.form-all{
    color:#EE7F00;
}

#boutonEnvoyerFomulaire{
	text-align:center;
}

#locked { font-weight: bold; color: #333; }
#unlocked { margin-left: 55px; }
p.quiet img { margin: 0 0 0 50px; }

.ui-slider { position: relative; text-align: left; display: block; margin: 10px 0 10px 125px; width: 235px; }
.ui-slider-handle { position: absolute; z-index: 2; width: 16px; height: 16px; cursor: pointer; background: #333; top: -4px; margin-left: -8px; border: 1px solid #784807; }
.ui-slider-horizontal { height: 10px; background: #ddd; border: 1px solid #ccc; }
.ui-slider-handle:hover, .ui-state-hover, .ui-state-focus, .ui-state-active { background: #aaa; }

/* CSS3 ---------------------------------------------------- */
.ui-slider-handle { 
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background: -moz-linear-gradient(top, #f60, #930);
	background: -webkit-gradient(linear, left top, left bottom, from(#f60), to(#930));
}
.ui-slider-horizontal { 
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background: -moz-linear-gradient(left, #fff, #ddd);
	background: -webkit-gradient(linear, left top, right top, from(#fff), to(#ddd));
}
a.ui-state-hover, a.ui-state-focus { 
	background: -moz-linear-gradient(top, #666, #333);
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
	box-shadow: 0px 0px 10px #f60;
	-moz-box-shadow: 0px 0px 10px #f60;
	-webkit-box-shadow: 0px 0px 10px #f60;
}
a.ui-state-active { 
	background: -moz-linear-gradient(top, #ddd, #aaa);
	background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
}


/*  Flash --------------------------------------------------*/

		
	#titreflash{
		position: relative;
		background:#EE7F00;
		width:860px;
		height:40px;
		//left:300px;
		font-size:28px;
		color:#FFFFFF;
		font-family:Arial;
		text-align: center;
		//margin-bottom: 10px;
		padding-top:0px;
	}
	
	#imageflash{
		position:absolute;
		height: 570px;
	}
	
	#CarouselDiv{
		position:relative;
		//top:16px;
		//margin-bottom: 60px;
		bottom: 20px;
		left:280px;
	}


	#contentflash{
		border:1px solid #EE7F00;
		border-top:0;
		margin:0;
		height:600px;
	}

	#contenu{
		margin:0;
		padding:20px;
	}
		
	
	#cache {
		position:relative;
		background:#ffffff;
		z-index:1;
		width:360px;
		height:20px;
		top:3px;
		left:280px;
	}
		
		
/** slider JS **/
#animation_accueil 
{ 
	//background: white url(../images/slider-bg-test.jpg); 
	//width: 960px; 
	border-top: solid 1px #EE7F00;
	border-bottom: solid 1px #EE7F00;
	margin-bottom: 5px;
	//position: absolute;
	//margin: 80px auto; 
	//padding: 50px 0; 
}
								  
/* DEFAULT is for three panels in width, adjust as needed
   This only matters if JS is OFF, otherwise JS sets this. */								  
#mover 
{ 
	width: 2880px; 
	position: relative; 
}

#slider 
{ 
	//background: white url(../images/slider-bg.jpg); 
	height: 180px; 
	overflow: hidden; 
	position: relative; 
	margin-bottom: 10px; 
}

.slide 
{ 
	padding: 25px 15px; 
	width: 900px; 
	float: left; 
	position: relative; 
}

.slide h1 a 
{ 
	font-family: Helvetica, Sans-Serif; 
	font-size: 30px; 
	letter-spacing: -1px; 
	color: #ac0000; 
}

.slide h1 a:hover 
{  
	//color: red;
	text-decoration: underline;  
}

.slide p 
{ 
	color: #999; 
	font-size: 12px; 
	line-height: 22px; 
	width: 300px; 
	text-align: left;
}
.slide img
{ 
	//width: 160px !important;
	//height: 110px !important;
	position: absolute; 
	top: 20px; 
	left: 400px; 
}
#slider-stopper 
{ 
	position: absolute; 
	top: 1px; 
	right: 20px; 
	background: #ac0000; 
	color: white; 
	padding: 3px 8px; 
	font-size: 10px; 
	text-transform: uppercase; 
	z-index: 1000; 
}		